
<template>
    <div class="login" >
        <vue-particles
                class="login-bg"
                color='#39AFFD'
                :particleOpacity="0.7"
                :particlesNumber="100"
                shapeType="circle"
                :particleSize="4"
                linesColor="#8DD1FE"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
        >
        </vue-particles>
        <div class="login-box">
            <div class="login-box-from">
                <el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="80px">
                    <h3><span>重置密码</span></h3>
                    <hr>
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon></el-input>
                    </el-form-item>
                    <el-form-item style="padding-right: 96px;margin-top: 30px;">
                        <el-button type="primary" icon="el-icon-upload" @click="doLogin()">登 录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>

<script>
    import axios from "axios";
    export default {
        name: "PassWordNew",
        data() {
            return {
                user: {
                    username: "",
                    password: ""
                }
            };
        },
        created() {},
        methods: {
            doLogin() {
                if (!this.user.username) {
                    this.$message.error("请输入用户名！");
                    return;
                } else if (!this.user.password) {
                    this.$message.error("请输入密码！");
                    return;
                } else {
                    //校验用户名和密码是否正确;
                    // this.$router.push({ path: "/personal" });
                    axios
                        .post("/login/", {
                            name: this.user.username,
                            password: this.user.password
                        })
                        .then(res => {
                            // console.log("输出response.data.status", res.data.status);
                            if (res.data.status === 200) {
                                this.$router.push({ path: "/personal" });
                            } else {
                                alert("您输入的用户名或密码错误！");
                            }
                        });
                }
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    /*<!--  将下面 login-bg 这个给解除了，就会出现黑色的粒子特效  -->*/
    /*    .login-bg{*/
    /*        width: 100%;*/
    /*        height: 100%;*/
    /*        background: #3E3E3E;*/
    /*    }*/
    .login-box-from{
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
    }
    .login-box{
        width: 400px;
        /*height: 287px;*/
        background: hsla(0,0%,100%,.3);
        border-radius: 5px;
        box-shadow: 0 0 2px #f7f7f7;
        border: 1px solid #f7f7f7;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -225px;
        margin-top: -150px;

    }
    .login {
        width: 100%;
        height: 100%;
        /*background: url("../assets/images/OIP-C.png") no-repeat;*/
        background-size: cover;
        overflow: hidden;
    }
    .login-wrap {
      /*background: url("../assets/images/OIP-C.png") no-repeat;*/
      background-size: cover;
      width: 80%;
      height: 80%;
      margin: 0px auto;
      overflow: hidden;
      padding-top: 10px;
      line-height: 40px;
    }
    #password {
        margin-bottom: 5px;
    }
    h3 {
        color: #0babeab8;
        font-size: 24px;
    }
    hr {
        background-color: #444;
        margin: 20px auto;
    }
    a {
        text-decoration: none;
        color: #aaa;
        font-size: 15px;
    }
    a:hover {
        color: coral;
    }
    .box-card {
        width: 100%;
    }
    .el-form-item {
        padding-right: 36px;
    }
</style>